<template>
	<div class="change-container">
		<!--修改手机号码内容-->
		<div class="change-account" v-if="!isChangePhoneSuccess">
		  <!--更改手机号码-->
			<div class="change-account-title">{{ $t('message.changePhone') }}</div>
			<!--已绑定手机号码：-->
			<div class="change-account-label" v-if="step === 1">
				{{ $t('message.hasBandedPhone') }}：<span>{{ phone }}</span>
			</div>
			<div class="new-phone" v-else>
			  <!--新手机号码：-->
				<div class="change-account-label">
					<label for="phoneNumber">{{$t('message.newPhone')}}：</label>
				</div>
				<!-- <div class="change-account-input">
					<input type="text" id="phoneNumber" v-model="phoneNumber" :placeholder="this.$t('message.newPhoneHolder')" />
				</div> -->
         <!--手机号码输入框-->
        <div class="phone-container">
          <div class="register-content-phone">
            <div class="register-area-code" @click.stop="toggleAreaCode">
             + {{ checkAreaCode }}
            </div>
            <ul class="register-area-list" v-if="isAreaCodeShow">
              <li v-for="(item,index) in areaCodeList" v-on:click="selectCode(index)">+ {{item}}</li>
            </ul>
          </div>
          <div class="register-content-phone-input">
            <input type="text" id="phoneNumber" v-model="phoneNumber" :placeholder="this.$t('message.newPhoneHolder')" />
          </div>
        </div>
				<div class="error-tips phone-error" v-if="phoneErrorText">
          {{ phoneErrorText }}
        </div>
			</div>
      <!--验证码：-->
			<div class="change-account-label change-account-label-middle">
				<label for="verificationCode">{{$t('message.code')}}：</label>
			</div>
			<div class="change-account-input-btn">
				<div class="change-account-verification-input">
					<input type="text" id="verificationCode" v-model="verificationCode" :placeholder="this.$t('message.sendCodeHolder')" />
				</div>
				<div class="change-account-btn">
          <v-code-button :status="btnStatus" @click-button="getVerificationCode"></v-code-button>
				</div>
			</div>
      <div class="error-tips" v-if="codeErrorText">
        {{ codeErrorText }}
      </div>
			<div class="change-account-btn-group" :class="{ 'error-style': codeErrorText }">
			  <!--下一步-->
				<button type="button" class="btn-item btn-confirm" @click="nextStep" v-if="step === 1">{{$t('message.next')}}</button>
				<!--确定-->
				<button type="button" class="btn-item btn-confirm" @click="changePhone" v-else>{{$t('message.yes')}}</button>
				<!--取消-->
				<button type="button" class="btn-item btn-cancle" @click="closeDialog">{{$t('message.no')}}</button>
			</div>
		</div>
		<!--修改手机号码成功-->
		<div class="change-success" v-else>
		  <div class="success-close" @click="closeDialog"></div>
			<div class="change-success-icon"></div>
			<div class="change-success-title">
				{{ $t('message.changePhoneSuccess') }}
			</div>
			<div class="change-success-tip">
				{{ delayTime }}{{$t('message.autoClose')}}
			</div>
		</div>
	</div>
</template>

<script>
import VCodeButton from '@/components/base/VCodeButton'

export default {
  name: 'PersonalAccountChangePhone',
  components: {
    VCodeButton
  },
  props: {
    phone: {
      type: String
    }
  },
  data () {
    return {
      step: 1,
      btnStatus: 0,
      verificationCode: '',
      codeStatus: 0,
      phoneNumber: '',
      phoneNumberStatus: 0,
      isChangePhoneSuccess: false,
      delayTime: 3,
      isAreaCodeShow: false,
      checkAreaCode: '',
      areaCodeList: ['66'],
      sendPhoneNumber: ''
    }
  },
  computed: {
    // 2:验证码不能为空
    // 3:验证码格式错误
    // 4:验证码发送失败，请点击按钮重新发送
    // 5:短信未开启
    // 6:该手机号码错误
    // 7:短信发送量太多。在一分钟内不超过两次
    // 8:验证码错误
    codeErrorText () {
      switch (this.codeStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.codeNoEmpty')
        case 3:
          return this.$t('message.codeFomatError')
        case 4:
          return this.$t('message.messageSendFail')
        case 5:
          return this.$t('message.messageNotOpen')
        case 6:
          return this.$t('message.phoneNumberError')
        case 7:
          return this.$t('message.messageSendSoMuch')
        case 8:
          return this.$t('message.codeError')
      }
    },
    // 2:输入内容不能为空
    // 3:手机号码格式错误
    // 4:该手机号码已经注册
    phoneErrorText () {
      switch (this.phoneNumberStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.inputError')
        case 3:
          return this.$t('message.registerError4')
        case 4:
          return this.$t('message.registerError5')
      }
    }
  },
  watch: {
    verificationCode (val) {
      this.codeStatus = 0
    },
    phoneNumber (val) {
      this.phoneNumberStatus = 0
      clearTimeout(this.phoneTimer)
      this.phoneTimer = setTimeout(() => {
        this.checkPhoneNumber()
      }, 1000)
    }
  },
  methods: {
    getVerificationCode () {
      if (this.step === 1) {
        this.getFirstStepCode()
      }
      if (this.step === 2) {
        this.getSecondCode()
      }
    },
    // 检验手机号码
    checkPhoneNumber () {
      let phoneNumber = this.phoneNumber
      if (phoneNumber === '') {
        this.phoneNumberStatus = 0
      } else if (!/^[0][689]\d{8}$/.test(phoneNumber)) {
        this.phoneNumberStatus = 3
      } else {
        this.sendPhoneNumber = this.checkAreaCode + phoneNumber
        this.$ajax.duplicateChecking({
          type: 'mobile',
          text: this.sendPhoneNumber
        }).post.then((res) => {
          if (res.code === 200) {
            this.phoneNumberStatus = 1
          } else if (res.code === 202) {
            this.phoneNumberStatus = 4
          } else if (res.code === 301) {
            this.phoneNumberStatus = 2
          } else if (res.code === 303) {
            this.phoneNumberStatus = 3
          }
        })
      }
    },
    // 第一步的获取验证码
    getFirstStepCode () {
      this.btnStatus = 1
      this.$ajax.getPhoneNum({
        type: 'TPL_SMS_FORGET_MOBILE_VERIFY_CODE'
      }).then((res) => {
        if (res.code === 200 || res.code === 311) {
          this.btnStatus = 2
          if (res.code === 200) {
            this.codeStatus = 0
          } else {
            this.codeStatus = 7
          }
        } else if (res.code === 202) {
          this.codeStatus = 4
          this.btnStatus = 0
        } else if (res.code === 301) {
          this.codeStatus = 5
          this.btnStatus = 0
        } else if (res.code === 303 || res.code === 305 || res.code === 307 || res.code === 309) {
          this.codeStatus = 6
          this.btnStatus = 0
        }
      })
    },
    // 第二步的获取验证码
    getSecondCode () {
      if (this.phoneNumber === '') {
        this.phoneNumberStatus = 2
        return
      }
      if (this.phoneNumberStatus === 1) {
        this.btnStatus = 1
        this.sendPhoneNumber = this.checkAreaCode + this.phoneNumber
        // console.log(this.sendPhoneNumber)
        this.$ajax.sendInfoCheck(this.sendPhoneNumber).then((res) => {
          if (res.code === 200 || res.code === 311) {
            this.btnStatus = 2
            if (res.code === 200) {
              this.codeStatus = 0
            } else {
              this.codeStatus = 7
            }
          } else if (res.code === 202) {
            this.codeStatus = 4
            this.btnStatus = 0
          } else if (res.code === 301) {
            this.codeStatus = 5
            this.btnStatus = 0
          } else if (res.code === 303 || res.code === 305) {
            this.codeStatus = 6
            this.btnStatus = 0
          }
        }).catch((err) => {
          console.log(err)
          this.verificationCodeStatus = 4
          this.btnStatus = 0
        })
      }
    },
    nextStep () {
      if (this.verificationCode === '') {
        this.codeStatus = 2
        return
      }
      if (this.verificationCode.length !== 6) {
        this.codeStatus = 3
        return
      }
      this.$ajax.checkVerificationCode({
        sms_code: this.verificationCode
      }).then((res) => {
        if (res.code === 200) {
          this.verificationCode = ''
          this.btnStatus = 0
          this.step = 2
        } else if (res.code === 201) {
          this.codeStatus = 8
        }
      })
    },
    closeDialog () {
      this.$emit('close')
    },
    changePhone () {
      if (this.phoneNumber === '') {
        this.phoneNumberStatus = 2
        return
      }
      if (!/^[0][689]\d{8}$/.test(this.phoneNumber)) {
        this.phoneNumberStatus = 3
        return
      }
      if (this.verificationCode === '') {
        this.codeStatus = 2
        return
      }
      if (this.verificationCode.length !== 6) {
        this.codeStatus = 3
        return
      }
      this.$ajax.modifyPhoneNum({
        old_mobile: this.phone,
        // new_mobile: this.phoneNumber,
        new_mobile: this.sendPhoneNumber,
        code: this.verificationCode
      }).then((res) => {
        if (res.code === 200) {
          // this.$emit('change-val', this.phoneNumber)
          this.$emit('change-val', this.sendPhoneNumber)
          this.delayCloseDialog()
        } else if (res.code === 311) {
          this.codeStatus = 8
        }
      })
    },
    delayCloseDialog () {
      this.isChangePhoneSuccess = true
      this.delayTimer = setInterval(() => {
        if (this.delayTime <= 0) {
          clearInterval(this.delayTimer)
          this.closeDialog()
        } else {
          this.delayTime -= 1
        }
      }, 1000)
    },
    toggleAreaCode () {
      this.isAreaCodeShow = !this.isAreaCodeShow
    },
    selectCode (index) {
      this.isAreaCodeShow = false
      this.checkAreaCode = this.areaCodeList[index]
    }
  },
  mounted () {
    this.checkAreaCode = this.areaCodeList[0]
    document.addEventListener('click', (e) => {
      this.isAreaCodeShow = false
    })
  }
}
</script>

<style scoped>
.change-container {
	background-color: #fff;
}

.change-account {
	width: 416px;
	padding: 40px;
}

.change-account-title {
	height: 28px;
	line-height: 28px;
	font-size: 20px;
	color: #333;
	text-align: center;
}

.change-account-label {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	margin-top: 40px;
}

.change-account-label span {
	color: #ff600a;
}

.change-account-label-middle {
	margin-top: 24px;
}

.new-phone {
  position: relative;
}

.change-account-input {
	width: 416px;
	height: 48px;
	margin-top: 12px;
}

.change-account-input input {
	width: 384px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-input-btn {
	height: 48px;
	margin-top: 12px;
}

.phone-error {
  position: absolute;
  bottom: -21px;
  left: 0;
}

.change-account-verification-input {
	float: left;
	width: 290px;
	height: 48px;
}

.change-account-verification-input input {
	width: 260px;
	height: 46px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	padding: 0 15px;
}

.change-account-btn {
	float: right;
	width: 110px;
	height: 48px;
}

.change-account-btn-group {
	margin-top: 40px;
	font-size: 0;
}

.error-style {
  margin-top: 12px;
}

.change-account-btn-group .btn-item {
	width: 200px;
	height: 48px;
	border-radius: 2px;
	font-size: 16px;
	cursor: pointer;
}

.change-account-btn-group .btn-confirm {
	border: 1px solid #ff600a;
	background-color: #ff600a;
	color: #fff;
	margin-right: 16px;
}

.change-account-btn-group .btn-confirm:hover {
	background-color: #ff3c00;
}

.change-account-btn-group .btn-confirm:active {
	background-color: #e83700;
}

.change-account-btn-group .btn-cancle {
	border: 1px solid #d7d7d7;
	background-color: #fff;
	color: #a5a5a5;
}

.change-success {
	width: 480px;
	padding: 60px 0;
	position: relative;
}

.success-close {
  width: 16px;
  height: 16px;
  background: url(../../../assets/images/icon_close.png) no-repeat;
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}

.change-success-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	background: url(../../../assets/images/icon_success.png) no-repeat center;
}

.change-success-title {
	height: 26px;
	line-height: 26px;
	font-size: 24px;
	color: #333;
	text-align: center;
	margin-top: 24px;
}

.change-success-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #747474;
	text-align: center;
	margin-top: 12px;
}
.phone-container {
  height: 50px;
  width: 416px;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}

.register-content-phone {
  float: left;
  width: 89px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  border: 1px solid #D7D7D7;
  border-right: 0;
  cursor: pointer;
  position: relative;
}

.register-area-code {
  position: relative;
  padding-left: 15px;
}

.register-area-code:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #333333;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -3px;
}

.register-area-list {
  width: 100%;
  border: 1px solid #D7D7D7;
  background: #fff;
  position: absolute;
  top: 100%;
  left: -1px;
}

.register-area-list li {
  line-height: 30px;
  padding-left: 15px;
  color: #333333;
}

.register-area-list li:hover {
  color: #fff;
  background: #1e90ff;
}

.register-content-phone-input {
  float: left;
  width: 326px;
  height: 50px;
}

.register-content-phone-input > input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  border: 1px solid #D7D7D7;
  padding: 0 16px;
}
</style>
